<template>
  <div class="text-setting lp-component-setting">
    <el-form ref="form" :model="componentData" label-width="120px">
      <el-form-item label="文本内容">
        <el-input
          type="textarea"
          :rows="8"
          placeholder="请输入文本内容"
          v-model="componentData.text">
        </el-input>
      </el-form-item>
    </el-form>
    <el-card shadow="never" style="margin-top: 10px">
      <el-row class="setting-item" type="flex" align="middle">
        <el-col class="item-name" :span="6">文字大小：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.fontSize" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.fontSize}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">颜色：</el-col>
        <el-col class="item-value" :span="18">
          <el-color-picker v-model="componentData.fontColor"></el-color-picker>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">背景色：</el-col>
        <el-col class="item-value" :span="18">
          <el-color-picker v-model="componentData.backgroundColor"></el-color-picker>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">对齐方式：</el-col>
        <el-col class="item-value" :span="18">
          <el-radio-group v-model="componentData.textAlign">
            <el-radio label="left">左对齐</el-radio>
            <el-radio label="center">居中</el-radio>
            <el-radio label="right">右对齐</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle">
        <el-col class="item-name" :span="6">上填充距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.paddingTop" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.marginTop}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">下填充距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.paddingBottom" :show-tooltip="false" ></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.marginBottom}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle">
        <el-col class="item-name" :span="6">左填充距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.paddingLeft" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.paddingLeft}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">右填充距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.paddingRight" :show-tooltip="false" ></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.paddingRight}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle">
        <el-col class="item-name" :span="6">上边距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.marginTop" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.marginTop}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">下边距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.marginBottom" :show-tooltip="false" ></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.marginBottom}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'LpTextSetting',
  title: '文本设置',
  registerName: 'lp-text-setting',
  props: {
    componentData: {
      type: Object,
      default: () => {}
    }
  },
  methods: {

  }
}
</script>
